<!--  -->
<template>
<div class='bankBbox'>
    <header>
        <span @click='$router.push("/layout/my/balace")'><van-icon name="arrow-left" /></span>
        <span>银行卡</span>
        <span><van-icon name="ellipsis" /></span>
    </header>
    <main>
        <div class="bankCard">
            <div class="bankColor" v-for='(item,ind) in cardInfo' :key="ind">
                <img src="../../../../../public/images/js_03.png" alt="">
                <span>{{item.cardholder}}&nbsp;&nbsp;({{item.cardNum}})</span>
                <span @click="delbank(ind)"><van-icon name="delete-o"/></span>
            </div>
        </div>
        <div class="addBank"  @click="isShow=true">
            <div>+添加银行卡</div>
        </div>
        <div v-if='isShow' class="cards">
            <li @click="firstAddBank">初次添加银行卡</li>
            <li @click="bankDialog=true">二次添加银行卡</li>
        </div>
        <div class="dialogBox" v-if='bankDialog'>
        <div class="dialogCon">
            <div class="wallet"><div>X</div><div>请输入钱包密码</div><span></span><span></span></div>
            <div class="jiebang"><span>解绑</span>工商银行（尾号3542）银行卡绑定</div>
                <van-password-input
                    :value="value"
                    info="密码为 6 位数字"
                    :error-info="errorInfo"
                    :focused="showKeyboard"
                    @focus="showKeyboard = true"
                 />
        </div>
        <van-number-keyboard
            v-model="value"
            :show="showKeyboard"
            @blur="showKeyboard = true"
        />
    </div>
    
    </main>
    
</div>
</template>

<script>
import {mapState} from "vuex"
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    bankDialog:false,
    value:'',// //钱包密码
    errorInfo : '',
    showKeyboard: true,
    bank:[],//银行卡
    isShow:false
};
},
//监听属性 类似于data概念
computed: {
    ...mapState(['cardInfo'])
},
//监控data中的数据变化
watch: {
     value(value) {
      if (value.length === 6 && value === '111111') {
          this.$router.push("/SecondaryAddBank")
        this.errorInfo = '';
      } else {
          this.errorInfo = '密码错误';
      }
    },
},
//方法集合
methods: {
firstAddBank(){//初次添加一行卡
    this.$router.push("/bankBinding")
},
delbank(ind){//删除
    this.cardInfo.splice(ind,1)
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

}
}
</script>
<style lang='scss' scoped>
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.bankBbox{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f3f3f3;
    header{
        height: 3.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.25rem;
        background:#51547d;
        color: #ffffff;
        padding: 0 .9375rem;
    }
    main{
        flex: 1;
        position: relative;
        background: #efefef;
        .bankCard{
            height:auto;
            display: flex;
            flex-direction: column;
            div{
                display: flex;
                height: 3.75rem;
                justify-content: space-around;
                align-items: center;
                background: #fff;
                border-bottom: .0625rem solid #f3f3f3;
            }
        }
        .addBank{
            height: 3.75rem;
            width: 100%;
            background: #fff;
            display: flex;
            justify-content:space-around;
            align-items: center;
            position: relative;
            color:#3e91de;
        }
        .cards{
            width: 8.125rem;
            border: .0625rem solid;
            height: 3.75rem;
             background: #fff;
             top:3.125rem;
             left:50%;
             transform: translateX(-50%);
             position: absolute;
            li{
                font-size: 1rem;
                border: .0625rem solid;
                margin: .25rem;
                background: #efefef;
            }
        }
    }
    .dialogBox{
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.8);
            .dialogCon{
                background: #fff;
                width: 20rem;
                height: 220px;
                position: fixed;
                top:50%;
                left:50%;
                transform: translate(-50%,-50%);
                border-radius: .9375rem;
                .wallet{
                    display: flex;
                    align-items: center;
                    height: 3.125rem;
                    justify-content: space-between;
                    border-bottom: .0625rem solid #999;
                    padding: .625rem;
                }
                .jiebang{
                    margin: .9375rem .625rem;
                }
            }
        }
}
</style>